<template>





  <van-nav-bar :title="film.name" left-arrow @click-left="onClickLeft" class="navbar" :fixed="true" />


  <van-image :src="film.poster" class="poster" />

  <div class="film-info">

    <div class="film-name">{{ film.name }} <i v-if="film.filmType">{{ film.filmType.name }} </i></div>
    <div class="film-tags">{{ film.category }}</div>
    <div class="film-premiere-time" v-if="film.premiereAt">{{
      formattedDateFromTimestamp(film.premiereAt) }} 上映</div>
    <div class="film-nation-runtime">{{ film.nation }} | {{ film.runtime }}分钟</div>
    <div class="film-desc"><van-text-ellipsis rows="2" :content="film.synopsis" />
    </div>
  </div>


  <div class="actors">
    <div class="title">
      <span>演职人员</span>
    </div>
    <div class="actors-list">
      <van-swipe :loop="false" :show-indicators="false" width="90">
        <van-swipe-item v-for="(actor, index) in film.actors" :key="index" class="actor-swipe-item">
          <div class="actor-item">
            <div class="actor-avatar"><img :src="actor.avatarAddress" alt="actor.name"></div>
            <div class="actor-name">{{ actor.name }}</div>
            <div class="actor-role">{{ actor.role }}</div>
          </div>
        </van-swipe-item>
      </van-swipe>
    </div>
  </div>

  <div class="gallery">
    <div class="title">
      <span class="left">剧照</span> <span class="right">全部({{ count }})</span>
    </div>
    <div class="gallery-list">
      <van-swipe :loop="false" :show-indicators="false" class="gallery-item" width="160">
        <van-swipe-item v-for="(photo, index) in film.photos" :key="index" class="gallery-swipe-item">
          <div class="gallery-item-img">
            <img :src="photo" alt="film-gallery" @click="onClickPhoto(index)" /> <!-- 点击显示剧照大图 -->
          </div>
        </van-swipe-item>

      </van-swipe>
    </div>
  </div>

  <van-button type="primary" block class="buy-ticket">选座购票</van-button>

  <!-- 显示剧照大图 -->
  <div class="van-overlay" :style="{ display: show ? 'block' : 'none' }">
    <!-- 头部 -->
    <van-nav-bar left-arrow @click-left="closePhoto" :title="showPhotoIndex" :fixed="true" class="header">
      <template #left>
        <van-icon name="cross" size="28" />
      </template>
    </van-nav-bar>

    <!-- 中间大图 -->
    <swiper-container ref="gallerySwiper" class="swiper-container" slides-per-view="1" :loop="false" :autoplay="false"
      :touch-ratio="1" :simulate-touch="true" :free-mode="false" :grab-cursor="true" @swiperslidechange="onSlideChange"
      @swipertouchstart="onTouchStart" @swipertouchmove="onTouchMove" @swipertouchend="onTouchEnd">
      <swiper-slide class="swiper-slide" v-for="(photo, index) in film.photos" :key="index">
        <img :src="photo" alt="gallery" class="gallery-img" />
      </swiper-slide>
    </swiper-container>
  </div>

</template>


<script setup>
import { watch, onMounted, ref, computed, useTemplateRef, nextTick } from 'vue';
import { useRouter } from 'vue-router';
const router = useRouter();

const gallerySwiper = useTemplateRef('gallerySwiper')

import { formattedDateFromTimestamp } from "@/api/tool.js"
import { getFilmDetail } from '@/api/index.js';
const props = defineProps({
  id: { // 电影id
    type: Number,
  }
})
const filmId = ref(props.id)
const film = ref({})
const show = ref(false) // 显示剧照大图
const photoIndex = ref(0) // 剧照索引
const count = computed(() => {
  return film.value.photos?.length || 0 // 使用可选链操作符
})

const showPhotoIndex = computed(() => {
  return (photoIndex.value + 1) + '/' + count.value
})


watch(props.id, async (newId) => {
  // 电影ID更新，请求新的电影详情
  if (newId) {
    filmId.value = newId
    const response = await getFilmDetail(newId)
    console.log("detail:", response);
    film.value = response.data.films
  }
},
  { immediate: true }, // 立即执行一次)
)

// 返回到前面的页面
const onClickLeft = () => {
  router.back()
}


// 点击显示剧照大图
const onClickPhoto = async (index) => {
  // 显示 剧照轮播图
  show.value = true
  // 确保 DOM 更新完成后再操作 Swiper 实例
  await nextTick();

  if (gallerySwiper.value) {
    const swiperInstance = gallerySwiper.value.swiper; // 获取 Swiper 实例
    console.log("Swiper实例化：", swiperInstance);
    // photoIndex.value = parseInt(index);
    swiperInstance.slideTo(index); // 设置当前幻灯片
    photoIndex.value = index; // 设置当前幻灯片索引
  }
}


const closePhoto = () => {
  show.value = false
}

const onSlideChange = (event) => {
  console.log('Slide changed to:', event.detail[0].activeIndex)
  photoIndex.value = event.detail[0].activeIndex; // 设置当前幻灯片索引

}


const onTouchStart = (event) => {
  console.log("onTouchStart:", event);
  //event.stopPropagation(); // 确保事件不被阻止

  if (gallerySwiper.value) {
    const swiperInstance = gallerySwiper.value.swiper;
    console.log("Swiper实例化：", swiperInstance);
    console.log("Swiper当前索引：", swiperInstance.realIndex);
    console.log("Swiper总幻灯片数：", swiperInstance.slides.length);
  }
};



const onTouchEnd = (event) => {
  console.log("onTouchEnd:", event);
  //event.stopPropagation(); // 确保事件不被阻止
  if (gallerySwiper.value) {
    const swiperInstance = gallerySwiper.value.swiper;
    console.log("Swiper实例化：", swiperInstance);
    console.log("Swiper当前索引：", swiperInstance.realIndex);
    console.log("Swiper总幻灯片数：", swiperInstance.slides.length);
  }

};





onMounted(async () => {
  // 页面初始化
  const response = await getFilmDetail(filmId.value)
  film.value = response.data.film

  await nextTick(); // 确保 DOM 更新完成后再操作 Swiper 实例

  if (gallerySwiper.value) {
    const swiperInstance = gallerySwiper.value.swiper;
    console.log("Swiper实例化：", swiperInstance);
  }

});



</script>




<style scoped>
.navbar {
  /* background-color: hsla(0, 0%, 100%, 0); */
  background-color: transparent;
  /* color: transparent; */
  transition: all .3s ease;
  width: 100%;
  height: 44px;
  z-index: 1;
  top: 0;
  left: 0
}

.navbar::after {
  content: "";
  display: block;
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 1px;
  background-color: #fff;
  /* 与背景颜色相同 */
}



:deep(.van-nav-bar__title.van-ellipsis) {
  color: #fff;
}

.poster {
  /* position: fixed; */
  width: 100%;

}

.film-info {
  padding: 10px;
  background-color: #fff;
}

.film-name {
  color: #191a1b;
  font-size: 18px;
  height: 24px;
  line-height: 24px;
  margin-right: 7px
}


.film-name i {
  font-size: 9px;
  color: #fff;
  background-color: #d2d6dc;
  height: 14px;
  line-height: 14px;
  padding: 0 2px;
  border-radius: 2px;
  display: inline-block;
}

.film-tags,
.film-premiere-time,
.film-nation-runtime,
.film-desc {
  font-size: 13px;
  color: #797d82;
  margin-top: 4px;
}

.film-desc {
  width: 100%;
  /* height: 30px; */
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap
}

.van-swipe-item .actor-swipe-item {
  width: 90px;
}

.actors {

  background-color: #fff;
  margin-top: 10px;
}

.actors .title {
  padding: 10px 10px 0 10px
}

.actors .title span {
  font-size: 16px;
  color: #191a1b;
}

.actors-list {
  padding: 10px;
  display: flex;
  align-items: center;
  justify-content: flex-start;

}


.actor-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  margin-right: 10px;
  width: 90px;

}


.actor-avatar {
  position: relative;
  width: 85px;
  height: 85px;
  overflow: hidden;
  margin-bottom: 20px;
}

.actor-avatar img {
  width: 100%;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);

}

.actor-name {

  font-size: 12px;
  color: #191a1b;
  height: 18px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.actor-role {
  font-size: 10px;
  color: #797d82;

}

.gallery {
  background-color: #fff;
  margin-top: 10px;
  margin-bottom: 60px;
}


.gallery-list {
  padding: 10px;
}


.gallery .title {
  padding: 10px 10px 0 10px;
}

.gallery-item {
  margin-right: 10px;
}


.van-swipe-item.gallery-swipe-item {
  width: 160px;
}


.gallery-item-img {
  position: relative;
  width: 150px;
  height: 100px;
}

.gallery-item-img img {
  position: absolute;
  width: 100%;
  top: 50%;
  transform: translateY(-50%);
}

.buy-ticket {
  position: fixed;
  bottom: 0;
  left: 0;
  height: 50px;
  text-align: center;
  color: #fff;
  font-size: 16px;
  line-height: 50px;
}

.container {
  width: 100%;
  position: relative;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.header {
  background-color: #000;
  border: none;
  box-shadow: none;
  /* 去除底部阴影 */
  height: 44px;
  line-height: 44px;
  width: 100%;
  z-index: 10;
}

.header::after {
  /*  去除 navbar 底部白线  */
  content: "";
  display: block;
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 1px;
  background-color: #fff;
  /* 与背景颜色相同 */
}


.photo-swipe {
  border: none;
  box-shadow: none;
  /* 去除底部阴影 */
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  overflow: hidden;
}



.gallery-img {
  width: 100%;
  display: block;
}

:deep(.van-swipe__track) {
  /* overflow: hidden !important; */
  width: 100%;
}


.van-overlay {
  background-color: rgba(0, 0, 0, 1);
  display: flex;
  justify-content: center;
  align-items: center;
  right: 0;
  bottom: 0;
  /* min-height: 100vh; */
  /* 确保覆盖整个视口高度 */
  /* min-width: 100vw; */
  /* 确保覆盖整个视口宽度 */
  position: fixed;
  top: 0;
  left: 0;
  z-index: 987;
  width: 100%;
  height: 100%;

}




.swiper-container {
  position: relative;
  width: 100%;
  /* max-height: calc(100vh - 88px); */
  /* height: calc(100vh - 44px); */
  height: 100%;
  /* 减去头部的高度 */
  overflow: hidden;
  box-sizing: border-box;
  display: flex;
  justify-content: center;
  align-items: center;
  pointer-events: auto;
}

.swiper-slide {
  display: flex;
  justify-content: center;
  align-items: center;
  /* width: 100%; */
  /* max-height: calc(100vh - 88px); */
  height: 100%;
  width: 100%;
  overflow: hidden;
  pointer-events: auto;
}


.swiper-slide img {
  display: block;
  width: 100%;
  max-height: calc(100vh - 88px);
  object-fit: cover;

}
</style>
